<template>
    <div id="user-view">
        <updateAvatarBox></updateAvatarBox>
        <div class="user-info-box">
            <div class="username">UID: {{ loginUserStore.getUid }}</div>
            <div class="username">用户名: {{ loginUserStore.username }}</div>
            <div class="nickname">
                昵称: {{ loginUserStore.getNickname }}
                <a-button class="change-btn" @click="startUpdateNickname">{{ updatingNickname ? '取消' : '修改'
                    }}</a-button>
                <div class="update-nickname-box" v-if="updatingNickname">
                    <updateNicknameBox @custom-event="finishUpdateNickname" />

                </div>

            </div>
        </div>
        <!-- <updatePasswordBox></updatePasswordBox> -->
        <a-button @click="changePassword" class="update-pwd-btn">修改密码</a-button>
        <a-button @click="logout" type="primary" danger class="logout-btn">退出登录</a-button>
    </div>
</template>

<script setup>
    import { onMounted, ref } from 'vue'
    import 'cropperjs/dist/cropper.css' // 确保引入样式
    import { useLoginUserStore } from '@/store/useLoginUserStore'
    import { useChatStore } from '@/store/useChatStore'
    import updateNicknameBox from '@/components/updateNicknameBox.vue'
    import updateAvatarBox from '@/components/updateAvatarBox.vue'
    import router from '@/router'
    import wsService from '@/api/websocket'
    const loginUserStore = useLoginUserStore()
    const chatStore = useChatStore()


    const updatingNickname = ref(false)
    const startUpdateNickname = () => {
        updatingNickname.value = !updatingNickname.value
        // newNickname.value = ''
    }
    const finishUpdateNickname = () => {
        updatingNickname.value = false
    }

    const changePassword = () => {
        router.push({
            path: '/login/password'
        })
    }

    const logout = () => {
        loginUserStore.logout()
        chatStore.logout()
        wsService.close()
        router.push({
            path: '/login/log'
        })
    }

    onMounted(() => {
        setTimeout(() => {
            if (!loginUserStore.loginStatus) {
                router.push({
                    path: '/login/log'
                })
            }
        }, 1000)

    })
</script>

<style scoped lang="less">
    #user-view {
        margin: 20px;
        padding: 40px;
        padding-bottom: 100px;
        border-radius: 40px;
        display: flex;
        flex-direction: column;
        // justify-content: center;
        align-items: center;
        // height: 5000px;
        background: rgba(255, 255, 255, 0.537);
        // height: 100%;
        /* 可选：如果内容高度超过容器，允许滚动 */
        // overflow-y: auto;
        // width: 60%;

        .user-info-box {
            margin-top: 30px;
            width: 230px;

            .username {
                width: 100%;
            }

            .nickname {
                line-height: 1;
                margin-top: 10px;

                .change-btn {
                    height: 20px;
                    padding: 0;
                    font-size: 10px;
                    width: 40px;
                }


            }
        }

        .update-pwd-btn {
            margin-top: 30px;
            width: 300px;
            background-color: rgb(151, 228, 228);
        }

        .logout-btn {
            margin-top: 20px;
            width: 300px;
        }
    }

</style>
